<template>
<div>
  <el-menu 
    :default-active="defaultMenu" 
    class="el-menu-demo" 
    mode="horizontal" 
    background-color="#00203e" 
    text-color="#c0c4cc"
    active-text-color="#00f6ff" 
    @select="handleSelect">
      <el-menu-item v-for="item in menuList" :index="item.id"  :key="item.id" >{{item.title}}</el-menu-item>
  </el-menu>
  <a v-if="link_state==2" href="http://172.30.10.185:8088/index.html#realPopulation" class="el-button2-class" >预测{{link_state}}</a>
  <a v-if="link_state==3" href="http://115.28.163.137:8000/#/cityGroup" class="el-button1-class" >评价</a>

  <a v-if="link_state==3" href="http://172.30.10.185:8088/index.html#populationScale" class="el-button2-class" >预测</a>
  <a v-if="link_state==4" href="http://115.28.163.137:8000/#/hazardousArticle" class="el-button1-class" >评价</a>
  <a v-if="link_state==4" href="http://115.28.163.137:8000/#/routePlan" class="el-button2-class" >预测</a>
  

</div>
</template>

<script>
export default {
  data(){
    return{
      link_state: 1
    }
  },

  computed:{
    menuList() {
      return this.$store.getters.curMenu;
    },
    defaultMenu(){
      console.log(this.$store.getters.defaultMenu)
      return this.$store.getters.defaultMenu
    },
    curopOptions(){
      return this.$store.getters.curopOptions
    },
  },
  methods: {
    jump(){

    },
    handleSelect(key) {
      console.log(key);
      this.link_state = key;
      this.$store.dispatch("changeMenu", key);
      let opts = this.curopOptions
      for(let i in opts){
        for(let j in opts[i]){
          const akey = Object.keys(opts[i][j])[0]
          let aval = opts[i][j][akey]
          if(akey.startsWith('o')){
            aval.selected = aval.default
          }else{
            aval.active = 1
          }
        }
      }

      this.$store.dispatch('changeBtnActive', 1)

      // // 更改地图类型 控制时间轴显示隐藏
      if(key=="1"){
        //
      }else if(key=="2"){
        this.$store.dispatch('changeCode',0)
        this.$store.dispatch('map/updateMapDraw',{id:1,url:'polygon'})
        this.$store.dispatch('timebar/isShowTimeBar',false)
        this.$store.dispatch('timebar/isShowTimeBtn',true)
      }else if(key=="3"){
        //日期段 默认激活状态为0
        this.$store.dispatch('changeCode',0)
        // 通过mapdraw 的监听来改变maptype
        this.$store.dispatch('map/updateMapDraw',{id:1,url:'polygon'})
        this.$store.dispatch('timebar/isShowTimeBar',false)
        this.$store.dispatch('timebar/isShowTimeBtn',false)
        this.$store.dispatch('changeSlideDate','2016-12')
      }else if(key=="4"){
        this.$store.dispatch('changeCode',0)
        // 更新mapdraw url
        this.$store.dispatch('map/updateMapDraw',{id:1,url:'join'})
        this.$store.dispatch('map/updateMapType', 'join')
        this.$store.dispatch('timebar/isShowTimeBar',false)
        this.$store.dispatch('timebar/isShowTimeBtn',true)
        
      }else if(key=="5"){
        this.$store.dispatch('changeCode',0)
        // 更新mapdraw url
        this.$store.dispatch('map/updateMapDraw',{id:1,url:'raster'})
        this.$store.dispatch('timebar/isShowTimeBar',false)
        this.$store.dispatch('timebar/isShowTimeBtn',false)
      }
      
    }
  },
  beforeCreate(){
      // 初始化菜单
    // this.$store.dispatch("changeMenu", "4");
  }
};
</script>

<style lang="stylus">
// @import url('//at.alicdn.com/t/font_1151041_96damgm2jur.css')  
@import url('//at.alicdn.com/t/font_1151041_0x37975lbbsg.css') 
html
  body
    /deep/ .el-dropdown-menu .el-popper
      left 0
    
.el-dropdown .el-button
  background none
  border none
  color #13ffd7
  height 60px
  border-radius none
  width 61px

.el-dropdown .el-button:focus,.el-dropdown .el-button:hover
  background #3e4967 

.el-dropdown-menu__item.active{
  color:#409EFF
}

.el-button1-class
  display block
  background rgb(55,63,87)
  z-index 999
  position absolute
  left 212px
  top 82px
  color rgb(173,178,188)
  text-decoration: none

.el-button2-class
  display block
  background rgb(55,63,87)
  z-index 999
  position absolute
  left 351px
  top 82px
  color rgb(173,178,188)
  text-decoration: none

.el-menu-demo
  float left

.el-menu-demo.el-menu--horizontal>.el-menu-item
    height 50px!important
    line-height 50px!important
</style>
